<template>
  <div>
    <van-space></van-space>
    <van-row>
      <van-col offset="8" span="5">
        <van-switch v-model="lightOn" @change="lightSwitch" size="4rem"/>
      </van-col>
    </van-row>
    <van-space></van-space>
    <van-row>
      <van-col offset="4" span="5" colspan="5">
        <span class="power_switch" @click="turnOnLight">
        <span class="on">
          <van-icon name="/images/power.svg" size="4rem"/>
        </span>
          </span>
      </van-col>
      <van-col offset="5" span="5">
         <span class="power_switch"  @click="turnOffLight">
        <span class="off">
          <van-icon name="/images/power.svg" size="4rem" color="#00FF00FF"/>
        </span>
         </span>
      </van-col>
    </van-row>
    <van-space></van-space>

    <van-space></van-space>
    <van-collapse v-model="collapse">
      <van-collapse-item title="设置" name="robot_settings" icon="setting-o">
        <van-space></van-space>
        <van-row>
          <van-col offset="1" span="10">
            <van-button @click="resetPos" type="primary">
              复&nbsp;&nbsp;&nbsp;位
            </van-button>
          </van-col>
          <van-col offset="1" span="10">
            <van-button @click="setRange" type="warning">
              保存为开灯
            </van-button>
          </van-col>
        </van-row>
        <van-space></van-space>
        <van-row>
          <van-col offset="1" span="22">
            <van-slider active-color="#37c279" v-model="pos" @change="setPos" max="180" min="0"/>
          </van-col>
        </van-row>
      </van-collapse-item>
    </van-collapse>

  </div>
</template>
<script>
import {Message} from "@arco-design/web-vue";
import {cmdChannel} from "@/js/on_start";
import axios from "axios";

export default {
  name: 'servo_switch'
  , data() {
    return {
      pos: 90,
      sn: '',
      collapse: [],
      currentLightDev: {},
      websocket: null,
      lightOn: false
    }
  },
  created() {
    this.sn = history.state['sn'];
    if (process.env.NODE_ENV === 'development') {
      Message.info({content: `this sn is  ${this.sn}`, showIcon: true});
    }
    this.currentLightDev = window.currentLightDev;
    if (this.currentLightDev['lightOn'] && this.currentLightDev['lightOn'] === 'true') {
      this.lightOn = true;
    }

  }, methods: {
    updateProp(key, val, notUpdateLocal) {
      if (!notUpdateLocal) {
        this.currentLightDev[key] = val
      }
      let url = '/dm/updateProp';
      if (process.env.NODE_ENV === 'development') {
        url = window.dev.httpUrlBase + url;
      }
      axios.post(url, {
        sn: this.sn, key: key, value: val
      }).then(console.log).catch(console.log)
    },
    send(opcode, params) {
      cmdChannel.sendRawCmd(this.sn, opcode, params);
    },
    setPos() {
      cmdChannel.sendRawCmd(this.sn, 3, ['' + this.pos]);
    }, resetPos() {
      this.pos = 90;
      cmdChannel.sendRawCmd(this.sn, 3, ['' + this.pos]);
    }, setRange() {
      cmdChannel.sendRawCmd(this.sn, 2, ['' + this.pos]);
    }, lightSwitch() {
      cmdChannel.sendRawCmd(this.sn, 1, [this.lightOn ? '0' : '1']);
      this.updateProp('lightOn', this.lightOn);
    }, turnOnLight() {
      this.lightOn = true;
      cmdChannel.sendRawCmd(this.sn, 1, ['0']);
      this.updateProp('lightOn', this.lightOn);
    }, turnOffLight() {
      this.lightOn = false;
      cmdChannel.sendRawCmd(this.sn, 1, ['1']);
      this.updateProp('lightOn', this.lightOn);
    }


  }
}
</script>
<style>
.off {
  display: inline-block;
  border-radius: 50%;
  filter: drop-shadow(1000px 0 0 var(--van-danger-color));
  transform: translate(-1000px);

}

.on {
  display: inline-block;
  border-radius: 50%;
  filter: drop-shadow(1000px 0 0 var(--van-success-color));
  transform: translate(-1000px);
}

.power_switch {
  display: inline-block;
  border-radius: 50%;
  box-shadow: 0 0 1px 1px #ccc;
  padding: 1rem;
}
</style>